<template>
  <div id="app" @mouseleave="isBigbox">
    <main class="main">
      <div class="mocks" v-show="showdia"></div>
      <div class="header">
        <img src="./components/imgs/logo1.jpg" class="img1" />
        <img src="./components/imgs/logo2.png" class="img2" />
        <span class="fh1">大运河文旅企业服务平台</span>
        <i class="el-icon-close" v-show="icon" @click="tb"></i>
        <img src="./components/imgs/kfz.jpg" alt="" class="kfz" v-show="kfz" />
        <img src="./app_img/whip.jpg" alt="" class="whip" v-show="whip" />
        <div class="div11">
          <!-- 一级导航 -->
          <el-button
            type="text"
            v-for="(item, index) in nav1"
            :key="index"
            class="div1"
            @mouseleave.native="addStyleOne(item, index)"
            @mouseover.native="had(item, index)"
            @click="jumpss(item.id, item.pageExist)"
          >
            {{ item.name }}
          </el-button>
        </div>
        <!-- 总: 二级导航，三级导航，四级导航   :disabled="!item.pageExist"-->
        <div class="box" id="boxTop" v-show="bigbox" @mouseleave="isBigbox">
          <!-- 二级导航 -->
          <div :class="nav2.length ? 'erji' : ''" id="erji">
            <el-button
              :class="
                item.pageExist ||
                item.id == '12dc7298-ccce-4f2d-b648-a3a6b1c5cf13'
                  ? 'zhjs1'
                  : 'zhjs1 opc'
              "
              style="font-size: 0.938vw"
              v-for="(item, index) in nav2"
              :key="index"
              @mouseover.native="activeNav2(item, index)"
              @mouseleave.native="addStyleTwo(item, index)"
              @click="
                item.pageExist ||
                item.id == '12dc7298-ccce-4f2d-b648-a3a6b1c5cf13'
                  ? jumpss(item.id)
                  : ''
              "
            >
              {{ item.name }}
            </el-button>
          </div>
          <!-- 三级导航 -->
          <div class="erbox">
            <div
              class="sanji"
              v-for="sanji in nav3"
              :key="sanji.id"
              v-show="
                sanji.id == 'e7a2ebff-7088-4f30-a031-ff72d4c5e8ed' ||
                sanji.id == '99c7198a-5e93-42ec-a1eb-8ccfe22c337a' ||
                sanji.id == '1b3ef709-3e66-42a9-b66c-a1bc60c77ad6'
                  ? false
                  : true
              "
            >
              <el-button
                class="sanjis"
                @click="jumpsss(sanji.id)"
                :disabled="
                  !sanji.pageExist ||
                    sanji.id == '6eea1b1f-c1eb-42e1-b614-bbcd84279a27' ||
                    sanji.id == '91c7f87c-ceee-4cb3-a497-a89f7d19e4a0' ||
                    sanji.id == '3f8d6f75-125d-449d-b536-f6de602ae505' ||
                    sanji.id == 'be600193-c71f-4343-ad8f-751bfe4374d0' ||
                    sanji.id == '2c7f5298-44b7-4cfa-a9a1-54fbb834474b'
                "
                >{{ sanji.name }}
              </el-button>
              <div class="line"></div>
              <!-- 四级导航 -->
              <el-button
                class="sijisi"
                style="font-size: 0.833vw; font-weight: 500"
                :disabled="!item.pageExist"
                v-for="(item, index) in sanji.parentList"
                :key="index"
                @click="jumpss(item.id)"
              >
                {{ item.name }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </main>
    <router-view />
  </div>
</template>
<script>
import { getDh } from "@/api/wslapi/";
export default {
  created() {},
  mounted() {
    window.onscroll = function() {
      var scrollTop = 0;
      if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop;
      } else if (document.body) {
        scrollTop = document.body.scrollTop;
      }

      if (scrollTop < 300) {
        // console.log("ok");
        document.querySelector(".header").style.backgroundColor = "";
      } else {
        document.querySelector(".header").style.backgroundColor = "black";
      }
    };
  },
  data() {
    return {
      bigbox: false,
      icon: false,
      kfz: false,
      showdia: false,
      // 一级导航
      nav1: [],
      // 二级导航
      nav2: [],
      // 三级导航
      nav3: [],
      whip: false,
    };
  },
  created() {
    // 请求导航接口 页面初始化的时候调用
    this.$nextTick(() => {
      this.dh();
    });
  },
  methods: {
    // 总盒子: 二级导航，三级导航，四级导航 鼠标指针离开时触发事件
    isBigbox() {
      this.bigbox = false;
      let borderOne = document.getElementsByClassName("div1");
      for (var i = 0; i < borderOne.length; i++) {
        // 把所有的按钮底部线去掉
        for (var j = 0; j < borderOne.length; j++) {
          borderOne[j].style.borderBottom = "";
        }
      }
    },
    // 点击一级导航触发事件
    jumpsss(id) {
      if (id == "d6d06c7a-dcce-45f5-b339-124fd06dea41") {
        this.$router.push({
          path: "/One_stop_service",
          query: {
            id: id,
          },
        });
      } else {
        this.$router.push({
          path: "/linkage",
          query: {
            id: id,
          },
        });
      }
    },

    jumpss(id, pageExist) {
      if (id == "6947dafe-0626-48d9-8776-572f022bfe84") {
        this.$router.push({ path: "/" });
      } else if (pageExist == 0) {
      } else if (id == "adc856bb-f091-4819-bffb-9e1a24aba08f") {
        this.$router.push({
          path: "/trapoer",
          query: {
            id: id,
          },
        });
      } 
      else if (id == "20e1a958-524d-4f0e-8407-31289732cae7") {
        this.$router.push({
          path: "/power_sum",
          query: {
            id: id,
          },
        });
      } else if (id == "ebb60571-b43a-4db8-945b-00fb6950ad5f") {
        this.$router.push({
          path: "/museum",
          query: {
            id: id,
          },
        });
      } else if (id == "b6675309-7be7-4836-a922-4dc681289aac") {
        this.$router.push({
          path: "/Wisdom_hotel",
          query: {
            id: id,
          },
        });
      } else if (id == "933b0722-8b14-4fe2-8db4-84ef076b742a") {
        this.$router.push({
          path: "/schleimigen",
          query: {
            id: id,
          },
        });
      } else if (id == "d386f28b-717a-42fe-ae59-ab448f125813") {
        this.$router.push({
          path: "/schleimigen",
          query: {
            id: id,
          },
        });
      } else if (id == "4c1ef2d3-e694-4b63-af08-b4559e61c834") {
        this.$router.push({
          path: "/schleimigen",
          query: {
            id: id,
          },
        });
      } else if (id == "ad71b73f-fa4e-48ec-95bb-a99656158656") {
        this.$router.push({
          path: "/schleimigen",
          query: {
            id: id,
          },
        });
      } else if (id == "ed00f1dd-f669-4b41-89a1-d66166f23ce7") {
        this.$router.push({
          path: "/schleimigen",
          query: {
            id: id,
          },
        });
      } else if (id == "9f252004-c8ff-46d2-86bf-032d08129bf3") {
        this.$router.push({
          path: "/One_stop_service",
          query: {
            id: id,
          },
        });
      } else if (id == "4e9d50fc-3ef2-41e4-9975-587177e4273d") {
        this.$router.push({
          path: "/One_stop_service",
          query: {
            id: id,
          },
        });
      } else if (id == "49a54ed3-b8e2-4118-b441-80db3f372dc6") {
        this.$router.push({
          path: "/One_stop_service",
          query: {
            id: id,
          },
        });
      } else if (id == "1ff4f88d-8a0a-487e-898f-1a4c67ba12a1") {
        this.$router.push({
          path: "/One_stop_service",
          query: {
            id: id,
          },
        });
      } else if (id == "ff0e51d1-d070-4ab1-bc93-216febcb58bf") {
        this.$router.push({
          path: "/One_stop_service",
          query: {
            id: id,
          },
        });
      } else if (id == "affa5b50-336e-4258-919e-ece362a71626") {
        this.$router.push({
          path: "/One_stop_service",
          query: {
            id: id,
          },
        });
      } else if (id == "e4398ef0-8cb4-4db2-ad25-e27f7b12bc68") {
        this.$router.push({
          path: "/One_stop_service",
          query: {
            id: id,
          },
        });
      } else if (id == "aa934b58-203d-42b5-911e-b7a70d64c54f") {
        this.$router.push({
          path: "/One_stop_service",
          query: {
            id: id,
          },
        });
      } else if (id == "a4d79453-7e5c-4441-8e82-1c474b59475b") {
        this.$router.push({
          path: "/One_stop_service",
          query: {
            id: id,
          },
        });
      } else if (id == "cfa76443-97eb-4da6-9bd6-173a1d1a2f81") {
        this.$router.push({
          path: "/One_stop_service",
          query: {
            id: id,
          },
        });
      } else if (id == "f68ab230-1e44-4ec7-a0e4-a502320823b9") {
        this.$router.push({
          path: "/One_stop_service",
          query: {
            id: id,
          },
        });
      } else if (id == "5f29d361-ff1e-4b76-8be5-6cc953bf7a9d") {
        this.$router.push({
          path: "/Wisdom_Toolbox",
          query: {
            id: id,
          },
        });
      } else if (id == "44ee7256-2dc9-4b64-b7eb-18da7451adb7") {
        this.$router.push({
          path: "/Wisdom_Toolbox",
          query: {
            id: id,
          },
        });
      } else if (id == "6e5e0e44-6270-407f-acd8-79c905c392b9") {
        this.$router.push({
          path: "/Wisdom_Toolbox",
          query: {
            id: id,
          },
        });
      } else if (id == "c7ebca1a-1031-42c0-8b61-5f10596e035b") {
        this.$router.push({
          path: "/Wisdom_Toolbox",
          query: {
            id: id,
          },
        });
      } else if (id == "23c24fe7-8951-4078-8e9f-ea041f895bc4") {
        this.$router.push({
          path: "/Wisdom_Toolbox",
          query: {
            id: id,
          },
        });
      } else if (id == "70c8e50d-ae83-4fe1-aec9-969c5be5cbee") {
        this.$router.push({
          path: "/Wisdom_Toolbox",
          query: {
            id: id,
          },
        });
      } else if (id == "877b4502-545a-43a3-bd0f-9ab047067982") {
        this.$router.push({
          path: "/Wisdom_Toolbox",
          query: {
            id: id,
          },
        });
      } else if (id == "e7771f24-7f28-4c24-997e-309bc9a4f3dc") {
        this.$router.push({
          path: "/Wisdom_Toolbox",
          query: {
            id: id,
          },
        });
      } else if (id == "ffa9afd7-bf58-43c7-87c2-a8f42e3fc9a8") {
        this.$router.push({
          path: "/Wisdom_Toolbox",
          query: {
            id: id,
          },
        });
      } else if (id == "0ca07dad-aee5-4487-b786-9af98b6a2e09") {
        this.$router.push({
          path: "/Wisdom_Toolbox",
          query: {
            id: id,
          },
        });
      } else if (id == "49b0ff1a-6c7b-40c0-9007-179c22baa4be") {
        this.$router.push({
          path: "/Wisdom_Toolbox",
          query: {
            id: id,
          },
        });
      } else if (id == "9cde7161-2774-4af2-ae43-4b2348308e73") {
        this.$router.push({
          path: "/Wisdom_Toolbox",
          query: {
            id: id,
          },
        });
      } else if (id == "9ab1810b-5eca-4432-bf41-f5f5d77681d6") {
        this.$router.push({
          path: "/Wisdom_Toolbox",
          query: {
            id: id,
          },
        });
      } else if (id == "3636023b-5c76-4844-99b8-e5331846dbe5") {
        this.$router.push({
          path: "/Wisdom_Toolbox",
          query: {
            id: id,
          },
        });
      } else if (id == "950906b1-c894-4bfb-a499-f1c939fb5fed") {
        this.$router.push({
          path: "/Wisdom_Toolbox",
          query: {
            id: id,
          },
        });
      } else if (id == "99b8142e-ea9f-4a7b-91ab-3e35d867e33c") {
        this.$router.push({
          path: "/Wisdom_Toolbox",
          query: {
            id: id,
          },
        });
      } else if (id == "b06123ad-6e62-4a48-8622-0d11a914b294") {
        this.$router.push({
          path: "/Wisdom_Toolbox",
          query: {
            id: id,
          },
        });
      } else if (id == "12dc7298-ccce-4f2d-b648-a3a6b1c5cf13") {
        console.log("568");
        window.open("https://ip.jscaee.com.cn/portal/#/index/home");
      } else {
        this.$router.push({
          path: "/linkage",
          query: {
            id: id,
          },
        });
      }
    },
    // 一级导航鼠标移入时触发事件
    had(item, index) {
      // 导航栏滚动条置顶
      // 二级菜单和三级菜单部分的滚动条置顶
      let slider = document.getElementById("boxTop");
      let erji = document.getElementById("erji");
      erji.scrollTop = 0;
      slider.scrollTop = 0;
      // 找到一级导航盒子
      let borderOne = document.getElementsByClassName("div1");
      for (var i = 0; i < borderOne.length; i++) {
        // 把所有的按钮边框色去掉
        for (var j = 0; j < borderOne.length; j++) {
          borderOne[j].style.borderBottom = "";
        }
        if (borderOne[index] !== borderOne[0] && item.parentList.length !== 0) {
          //再把当前的按钮底部板框设置成白色
          borderOne[index].style.borderBottom = "1.5px solid #fff";
        }
      }
      // hover时二级导航栏的背景色
      let btns = document.getElementsByClassName("zhjs1");
      for (var i = 0; i < btns.length; i++) {
        // 去除所有的按钮背景颜色去掉
        for (var j = 0; j < btns.length; j++) {
          btns[j].style.backgroundColor = "";
        }
        //再把当前的按钮背景颜色设置成灰色
        btns[0].style.backgroundColor = "gray";
      }
      // 清除nav3内的数据
      this.nav3 = [];
      // 如果鼠标划过首页隐藏 2 ，3 ，4级导航
      if (item.parentList == "") {
        this.bigbox = false;
        // 找到一级导航盒子
        let borderOne = document.getElementsByClassName("div1");
        for (var i = 0; i < borderOne.length; i++) {
          // 把所有的按钮边框色去掉
          for (var j = 0; j < borderOne.length; j++) {
            borderOne[j].style.borderBottom = "";
          }
        }
      } else {
        this.nav3 = item.parentList[0].parentList;
        // 否则把2级导航数据赋值给nav2
        this.bigbox = true;
        this.nav2 = item.parentList;
      }
    },
    // 一级导航移出时触发事件
    addStyleOne(item, index) {
      let borderOne = document.getElementsByClassName("div1");
      for (var i = 0; i < borderOne.length; i++) {
        // 把所有的按钮边框色去掉
        for (var j = 0; j < borderOne.length; j++) {
          borderOne[j].style.borderBottom = "";
        }
        if (borderOne[index] !== borderOne[0] && item.parentList.length !== 0) {
          //再把当前的按钮底部板框设置成白色
          borderOne[index].style.borderBottom = "1.5px solid #fff";
        }
      }
    },

    // 鼠标移入2级导航触发事件
    activeNav2(item, index) {
      // 找到2级所有导航标签
      let btns = document.getElementsByClassName("zhjs1");
      for (var i = 0; i < btns.length; i++) {
        // 我们先把所有的按钮背景颜色去掉
        for (var j = 0; j < btns.length; j++) {
          btns[j].style.backgroundColor = "";
        }
        //再把当前的按钮背景颜色设置成灰色
        btns[index].style.backgroundColor = "gray";
      }
      // 把3级导航赋值给nav3
      this.nav3 = item.parentList;
      if (item.id == "12dc7298-ccce-4f2d-b648-a3a6b1c5cf13") {
        this.whip = true;
      } else {
        this.whip = false;
      }
    },
    // 鼠标移出触发事件
    addStyleTwo(item, index) {
      let btns = document.getElementsByClassName("zhjs1");
      for (var i = 0; i < btns.length; i++) {
        // 把所有的按钮背景颜色去掉
        for (var j = 0; j < btns.length; j++) {
          btns[j].style.backgroundColor = "";
        }
        //再把当前的按钮背景颜色设置成pink
        btns[index].style.backgroundColor = "gray";
      }
      if (item.id == "12dc7298-ccce-4f2d-b648-a3a6b1c5cf13") {
        this.whip = false;
      } else {
        this.whip = false;
      }
    },
    // 请求导航接口
    dh() {
      getDh().then((res) => {
        if (res.data.code === "10000") {
          this.nav1 = res.data.data;
        } else {
          this.$message.error("导航请求失败, 请刷新重试！");
        }
      });
    },
    // 鼠标移入时的border
    tb() {
      this.showdia = false;
      this.icon = false;
      this.kfz = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.whip {
  position: absolute;
  width: 339px;
  height: 306px;
  z-index: 10;
  top: 180px;
  left: 1200px;
}
.cop {
  cursor: default;
}
*::-webkit-scrollbar {
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 0px;
  // display: none !important;
}
*::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.2);
  transition: background 1s;
}
*::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  height: 150px;
  background: #ededed;
}
* {
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}
.sanjis.el-button.is-disabled {
  color: #ffff !important;
  cursor: default !important;
}
/deep/.el-button--text {
  color: #ffffff !important;
}
.el-button.is-disabled {
  color: #c0c4cc !important;
}
/deep/.zhjs.el-button.is-disabled {
  color: #ffff !important;
  cursor: default !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
}
/deep/.zhjs1.el-button.is-disabled:hover {
  // background-color: gray !important;
  background-image: url(./components/imgs/icon1.png);
  background-repeat: no-repeat;
  background-position-x: 150px;
  background-position-y: 13.5px;
}
.mocks {
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
}
#app {
  text-align: center;
}
* {
  margin: 0 !important;
  padding: 0 !important;
}
.main {
  // position: relative;
  top: 0;
  left: 0;
  z-index: 10;
  .header {
    height: 80px;
    min-width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.2);
    .div11 {
      min-width: 750px;
      height: 100%;
      position: absolute;
      left: 900px;
      top: 0px;
      display: flex;
      justify-content: space-around;
      .div1 {
        width: 120px;
        height: 100%;
        font-size: 1.042vw;
        border-radius: 0;
        box-sizing: border-box !important;
      }
    }
    .el-icon-close {
      position: absolute;
      top: 13.021vw;
      left: 1230px;
      z-index: 5;
      font-size: 20px;
    }
    .kfz {
      width: 600px;
      height: 400px;
      position: absolute;
      top: 250px;
      left: 650px;
      background-color: #ffffff;
    }
    .img1 {
      min-width: 53px;
      height: 53px;
      position: absolute;
      top: 14px;
      left: 294px;
    }
    .img2 {
      min-width: 87px;
      height: 53px;
      position: absolute;
      top: 14px;
      left: 364px;
    }
    .fh1 {
      position: absolute;
      min-width: 275px;
      height: 33px;
      font-size: 24px;
      color: #ffffff;
      top: 23px;
      left: 502px;
    }
  }
}
.box {
  display: flex;
  width: 964px;
  height: 509px;
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 80px;
  left: 41.646vw;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

.el-icon-arrow-down:before {
  display: none;
}
// 二级盒子
.erji {
  background: #020200;
  color: #fff;
  font-size: 16px;
  width: 21.5%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  padding-top: 15px !important;
  padding-left: 2px !important;
  overflow: auto;
  .el-button--default {
    background-color: rgba(0, 0, 0, 0.72);
    color: #fff;
  }
  .zhjs1 {
    background: rgba(0, 0, 0, 0.72);
    width: 204px;
    height: 54px;
    font-size: 0.938vw;
    line-height: 54px;
    text-align: left;
    padding-left: 25px !important;
    color: #ffffff;
    border-radius: 5px !important;
    border: 0;
  }
}

.zhjs1:hover {
  background-image: url(./components/imgs/icon1.png);
  background-repeat: no-repeat;
  background-position-x: 150px;
  background-position-y: 13.5px;
}
.erbox {
  display: flex;
  width: 78.5%;
  flex-wrap: wrap;
  align-content: flex-start;
  padding-top: 35px !important;
  padding-left: 30px !important;
  overflow: auto;

  .sanji {
    width: 33.3%;
    padding-bottom: 20px !important;

    /deep/ .el-button {
      font-size: 0.938vw;
      color: #fff;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      background-color: rgba(0, 0, 0, 0);
      border: 0;
    }
    .sijisi {
      color: #fff;
      text-align: left;
      margin-top: 10px !important;
      margin-left: 0px !important;
    }
  }
}
.line {
  height: 1px;
  width: 150px;
  margin-top: 10px !important;
  // border: 1px solid #666;
  background: #666;
}
.opc {
  cursor: default;
}
</style>
